<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>冷链物流</title>
  <!--  widthmaximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。 -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <style>
  #example2 td{
	border:1px #d2d6de solid;
	text-align:center;
	vertical-align:middle;
  }
  .tab1 td{
	border:1px #d2d6de solid;
	text-align:center;
	vertical-align:middle;
  }
  #persontable td{
	border:1px #d2d6de solid;
	text-align:center;
	vertical-align:middle;
  }
  </style>
</head>
<body>

  <div class="container" style="background:#FFFFFF">
	<section class="content-header">
		<div class="col-lg-10">
			<!-- <h2>系统名称</h2> -->
			<ol class="breadcrumb" id="index_breadcrumb">
				<li class="active">
					<i class='fa fa-anchor' style='color:#18a689;'></i>&nbsp;&nbsp;
						<strong>当前位置：信息设置>>短信通知详情</strong>
				</li>
			</ol>
		</div>
		<div class="col-lg-2">
		</div>
	</section>
	<div class="col-lg-12">

		 <table id="example2" class="table table-bordered table-hover">

			<tbody>
			<tr>
			  <td><label for="numberPlate">车牌号</label></td>
			  <td><input type="text" class="form-control" id="numberPlate" placeholder="车牌号"></td>
			  <td><label for="carNo">车辆编号</label></td>
			  <td><input type="text" class="form-control" id="carNo" placeholder="车辆编号"></td>
			  <td><label for="carType">车辆类型</label></td>
			  <td><input type="text" class="form-control" id="carType" placeholder="车辆类型"></td>
			</tr>

		  </table>

		 <div>通知设置</div>

		 <div class="row clearfix col-lg-5">
		 <ul id="myTab" class="nav nav-tabs" >
			<li class="active" onclick="changeTab('wsdyx')">
				<a href="#wsdyx" data-toggle="tab">
					 温湿度越限
				</a>
			</li>
			<li onclick="changeTab('zdgz')"><a href="#zdgz" data-toggle="tab">终端故障</a></li>
			<li onclick="changeTab('txgz')">
				<a href="#txgz" data-toggle="tab">通讯故障</a>
			</li>
			<li onclick="changeTab('dzwl')">
				<a href="#dzwl" data-toggle="tab">电子围栏</a>
			</li>
		</ul>

		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade active in" id="wsdyx">
				<table class="tab1">
					<tr>
						<td>数据项：</td>
						<td colspan="5" class="col-lg-10">
							<select class="form-control" id="selects">
								<option>option 1</option>
								<option>option 2</option>
							  </select>
						</td>
					</tr>
					<tr>
						<td>阈值：</td>
						<td >上限</td>
						<td class="col-lg-3"><input type="text" class="form-control" id="up"></td>
						<td>下限</td>
						<td colspan="2"><input type="text" class="form-control" id="down" style="width:75px"></td>

					</tr>
					<tr>
						<td>发送规则：</td>
						<td><input type="radio" name="rd" checked>立即发送</td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" id="lx" style="width:60px">
						</td>

						<td colspan="2">次发送</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" id="lx2" style="width:60px">
						</td>
						<td colspan="3">分钟发送</td>
					</tr>
					<tr>
						<td>发送时间:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分至</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分</span>
						</td>
					</tr>
					<tr>
						<td>发送次数:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">（连续发送短信次数）</span>

						</td>
					</tr>
				</table>
			</div>
			<div class="tab-pane fade" id="zdgz">
				<table class="tab1">
					<tr>
						<td >数据项：</td>
						<td colspan="5" class="col-lg-10">
							<select class="form-control" >
								<option>option 1</option>
								<option>option 2</option>
							  </select>
						</td>
					</tr>
					<tr>
						<td>发送规则：</td>
						<td><input type="radio" name="rd" checked>立即发送</td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>

						<td colspan="2">次发送</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>
						<td colspan="3">分钟发送</td>
					</tr>
					<tr>
						<td>发送时间:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分至</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分</span>
						</td>
					</tr>
					<tr>
						<td>发送次数:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">（连续发送短信次数）</span>

						</td>
					</tr>
				</table>
			</div>
			<div class="tab-pane fade" id="txgz">
				<table class="tab1">
					<tr>
						<td >数据项：</td>
						<td colspan="5" class="col-lg-10">
							<select class="form-control" >
								<option>option 1</option>
								<option>option 2</option>
							  </select>
						</td>
					</tr>
					<tr>
						<td>发送规则：</td>
						<td><input type="radio" name="rd" checked>立即发送</td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>

						<td colspan="2">次发送</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>
						<td colspan="3">分钟发送</td>
					</tr>
					<tr>
						<td>发送时间:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分至</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分</span>
						</td>
					</tr>
					<tr>
						<td>发送次数:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">（连续发送短信次数）</span>

						</td>
					</tr>
				</table>
			</div>
			<div class="tab-pane fade" id="dzwl">
				<table class="tab1">
					<tr>
						<td >数据项：</td>
						<td colspan="5" class="col-lg-10">
							<select class="form-control" >
								<option>option 1</option>
								<option>option 2</option>
							  </select>
						</td>
					</tr>
					<tr>
						<td>发送规则：</td>
						<td><input type="radio" name="rd" checked>立即发送</td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>

						<td colspan="2">次发送</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="radio" name="rd">连续超过</td>
						<td>
							<input type="number" class="form-control" value="1"  max="10" min="1" style="width:60px">
						</td>
						<td colspan="3">分钟发送</td>
					</tr>
					<tr>
						<td>发送时间:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分至</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">时</span>

							<div style="float:left;"><input type="number" class="form-control" value="1"  max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">分</span>
						</td>
					</tr>
					<tr>
						<td>发送次数:</td>
						<td colspan="5">
							<div style="float:left;" ><input type="number" class="form-control" value="1" max="10" min="0" style="width:60px"></div>
							<span style="margin-left:5px;display:inline-block;float:left;line-height:34px">（连续发送短信次数）</span>

						</td>
					</tr>
				</table>
			</div>

		</div>
		</div>
		<div class="col-lg-1" style="height:200px;text-align:center;padding-top:80px">
			<button type="button" style="width:40px;height:40px;" id="addtz">></button>
		</div>

		<div class="col-lg-6" style="height:200px;border:1px;border-color:red;">
			<button type="button" class="btn btn-primary btn-lg2" id="del">删除</button>
			<table class="table table-bordered" id="tztable">

			</table>
		</div>

		<div class="row clearfix col-lg-12" style="height:20px; margin-top:40px">通知对象设置</div>
		<div class="row clearfix col-lg-12">
			<button type="button" class="btn btn-primary btn-lg2" id="add">添加</button>
			<button type="button" class="btn btn-primary btn-lg2" id="delete">删除</button>
			<button type="button" class="btn btn-primary btn-lg2" data-toggle="modal" data-target="#dxModal">短信模版</button>
		</div>
		<div class="row clearfix col-lg-12">
			<table id="persontable">
				<tr id="tr1">
					<td class="col-lg-1"><input type="checkbox" name="checkbox1" id="ck1" value=""></td>
					<td class="col-lg-2"><label>姓名</label></td>
					<td class="col-lg-2"><input type="text" class="form-control"></td>
					<td class="col-lg-2"><label>性别</label></td>
					<td class="col-lg-1">
						<select class="form-control" >
							<option>男</option>
							<option>女</option>
						</select>
					</td>
					<td class="col-lg-2"><label>联系电话</label></td>
					<td class="col-lg-2"><input type="text" class="form-control"></td>
				</tr>
			</table>
		</div>
		<div class="modal-footer col-lg-12">
			<a class="btn btn-primary" id="#dxlb" onclick="temps(this.id);">
				提交更改
			</a>
			<a  class="btn btn-default" id="#dxlb" onclick="temps(this.id);">关闭</a>
		</div>
		<div class="modal fade" id="dxModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
			<div class="modal-dialog" style="width:60%;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							详情
						</h4>
					</div>
					<div class="modal-body">
						<div>
							<span style="float:left" class="col-lg-2">
								<input type="text" class="form-control" placeholder="姓名">
							</span>
							<span style="float:left" class="col-lg-2">
								<input type="text" class="form-control" placeholder="性别">
							</span>
							<span style="float:left">
								<label style="float:left">士：</label>
							</span>
							<span style="float:left">
								<label style="float:left">车牌号</label>
							</span>
							<span style="float:left" class="col-lg-2">
								<input type="text" class="form-control" placeholder="车牌号码">
							</span>
							<span style="float:left" class="col-lg-2">
								<input type="text" class="form-control" placeholder="故障类型">
							</span>
							<span style="float:left">
								<label style="float:left">故障，请及时处理。</label>
							</span>
						</div>



					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary">
							提交更改
						</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
					</div>
				</div>
			</div>
		</div>


	</div>

  </div>


<script>
	var indexTr = 2;//添加通知对象用到
	var txType = ['wsdyx','zdgz','txgz','dzwl'];


	$(function(){
		addtz();
		del();
		add();
		deletes();
		$(".form_datetime").datetimepicker({
			format: "yyyy-mm-dd hh:ii:ss",
			autoclose: true,
			todayBtn: true,
			minuteStep: 1
		});


		$('#tztable').bootstrapTable({
			striped: true, //是否显示行间隔色
			uniqueId: "id",
			columns: [{
				checkbox: true
			},{
				field: 'id',
				title: 'id'
			}, {
				field: 'type',
				title: '类型'
			}, {
				field: 'dataItem',
				title: '数据项'
			}, {
				field: 'notificationRules',
				title: '通知规则'
			}, {
				field: 'delayedMinutes',
				title: ''
			}, {
				field: 'notificationTimes',
				title: '通知次数'
			}, {
				field: 'setTime',
				title: '设置时间'
			}],
			data: [{
				id: '1',
				type: '温湿度越限',
				dataItem: '温传 1-温度',
				notificationRules: '立即通知',
				delayedMinutes: '--',
				notificationTimes: '1',
				setTime:'2017-06-08 22:22:22'
			}, {
				id: '2',
				type: '电子围栏',
				dataItem: '驶出',
				notificationRules: '延时通知（min）',
				delayedMinutes: '5',
				notificationTimes: '2',
				setTime:'2017-06-08 22:22:22'
			}]
		});


	})

	function add(){
		$("#add").click(function(){
			var trLength = $("#persontable").find("tr").length;//总行数
			if(trLength >= 3){
				alert("最多只能设置3个通知对象");
			}else{
				var html = '<tr id="tr'+indexTr+'">';
					html +=	'<td class="col-lg-1"><input type="checkbox" name="checkbox1" id="ck'+indexTr+'" value="" ></td>';
					html +=	'<td class="col-lg-2"><label>姓名</label></td>';
					html +=	'<td class="col-lg-2"><input type="text" class="form-control"></td>';
					html +=	'<td class="col-lg-2"><label>性别</label></td>';
					html +=	'<td class="col-lg-1">';
					html +=		'<select class="form-control" >';
					html +=			'<option>男</option>';
					html +=			'<option>女</option>';
					html +=		'</select>';
					html +=	'</td>';
					html +=	'<td class="col-lg-2"><label>联系电话</label></td>';
					html +=	'<td class="col-lg-2"><input type="text" class="form-control"></td>';
					html +=	'</tr>';
				$("#persontable").append(html);
				indexTr ++;
			}
		})
	}
	function deletes(){
		$("#delete").click(function(){
			$("input[name='checkbox1']:checked").each(function () {
				var ckid = this.id;
				ckid = ckid.substring(2,ckid.length);
				if(ckid == 1){
					alert("默认通知对象不能删除");
					return;
				}
				$("#tr"+ckid).remove();
			})
		})
	}
	function changeTab(tabId){
		$.each(txType, function(k, v){
			if(txType[k]==tabId){
				$("#"+txType[k]).show();
			}else{
				$("#"+txType[k]).hide();
			}
		})
	}
	function addtz(){
		$("#addtz").click(function(){
			var rows = [];//新增的行
			rows.push({
				id: '3',
				type: '电子围栏',
				dataItem: '驶出',
				notificationRules: '延时通知（min）',
				delayedMinutes: '5',
				notificationTimes: '2',
				setTime:'2017-06-08 22:22:22'
			});
			$('#tztable').bootstrapTable('append', rows);
		})
	}
	function del(){
		$("#del").click(function(){
			var getRows = $('#tztable').bootstrapTable('getSelections');
			if(getRows.length == 0){
				alert("请至少选择一行删除！");
			}else{
				$.each(getRows, function(k, v){
					$('#tztable').bootstrapTable('removeByUniqueId', getRows[k].id);
				})
			}
		})

	}

	function temps(path){
		window.location=path;
	}
</script>

 <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>
